<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/14
  Time: 15:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户信息新增</title>
    <%--    引入jquery资源文件：必须在bootstrap资源文件之前引入--%>
    <script type="text/javascript" src="static/jquery-1.12.4/jquery-1.12.4.js"></script>
    <%--    引入bootstrap的资源文件--%>
    <script type="text/javascript" src="static/bootstrap-3.3.6-dist/js/bootstrap.js"></script>
    <%--    引入My97DatePicker的js资源文件--%>
    <script language="javascript" type="text/javascript" src="static/My97DatePicker/WdatePicker.js"></script>

    <link rel="stylesheet" type="text/css" href="static/bootstrap-3.3.6-dist/css/bootstrap.css">

    <%--    在bootstrap的资源文件之后，引入日历框的资源文件--%>
    <link rel="stylesheet" type="text/css" href="static/bootstrap-datepicker-master/dist/css/bootstrap-datepicker.css">

    <script language="javascript" type="text/javascript"
            src="static/bootstrap-datepicker-master/dist/js/bootstrap-datepicker.js"></script>

    <%--    分页插件的使用--%>
    <link rel="stylesheet" type="text/css" href="static/paginationjs-master/dist/pagination.css">

    <script language="javascript" type="text/javascript"
            src="static/paginationjs-master/dist/pagination.min.js"></script>


    <script type="text/javascript">
        //////////////////////////////////使用jquery在js解析时就执行加载日历框的处理事件//////////////////////////////////////////////
        // jquery在js解析时就会执行（页面加载时执行）
        $(function () {
            // 此处的代码是在页面加载时就执行
            // $('#userRegDate2').datetimepicker();
            $("#userRegDate2").datepicker({
                format: "yyyy-mm-dd",
                language: "zh-CN",
                todayBtn: true
            });
            // 课下扩展作业： 进行本地化处理（英文翻译成中文）

        }); // 在页面加载时执行

        ////////////////////////////////////ajax请求处理-分页插件（假分页）///////////////////////////////////

        // ajax请求处理函数
        function doAjaxQuery() {
            console.log("正准备执行ajax请求");

            // 获取form表单中的输入框控件的值

            console.log("#formQuery.serialize():::::::::::::::")
            console.log($("#formQuery").serialize())
            // 结果串：userName=user&userAddress=&userTel=&userRegDate=&userRegDate2=

            // jquery进行ajax的查询请求
            $.ajax({
                type: "post", // 指明request请求类型为post请求
                url: "UserInfoAjaxQueryServlet", // 请求的url，form表单的action属性的值
                data: $("#formQuery").serialize(),// serialize方法将form表单进行序列化处理；客户端浏览器发送给服务器端的数据
                dataType: "json", // 指明服务器发回的响应内容的格式 Json【服务器发给ajax引擎的是json字符串，jquery将json字符串转换为json对象】
                success: function (data) { // ajax引擎执行成功之后的回调函数处理【符合条件：xmlhttp.readyState == 4 && xmlhttp.status == 200】
                    console.log("ajax查询结果：");
                    console.log(data);
                    // 局部刷新浏览器：使用js操作页面标签对象进行显示【dom操作】
                    // data 是 json对象，且不为空
                    if (data) {
                        // 使用分页插件对查询结果集  data 进行分页显示
                        $("#mypager").pagination({
                            dataSource: data,// 查询的所有的数据都在data中，pagination插件对所有的数据集合进行分页处理
                            pageSize: 5,
                            showGoInput: true,
                            showGoButton: true,
                            callback: function (eachPageData, pagination) {  // eachPageData是分页插件从所有的数据集合中获取的当前页要显示的数据集结
                                // template method of yourself
                                // 拼接要显示的内容的html
                                var showDom = "";
                                // juery的each函数进行json数组对象的循环遍历list集合【json数组】
                                /*
                                 * each函数：第一个参数是被遍历的集合对象；
                                 *           第二个参数是被遍历元素进行的回调处理；
                                 *                  该参数是一个回调函数，该函数的第一个参数是当前被遍历的元素的下标；
                                 *                                                第二个参数就是当前被遍历的元素对象；
                                 */
                                $.each(eachPageData, function (i, eachBean) {
                                    // 将要显示的内容进行html内容拼接
                                    showDom += "<tr>";

                                    showDom += "<th scope=\"row\">";
                                    showDom += (i + 1);
                                    showDom += "</th>";

                                    showDom += "<td>";
                                    showDom += eachBean["username"];
                                    showDom += "</td>";

                                    showDom += "<td>";
                                    showDom += eachBean.useraddress;
                                    showDom += "</td>";

                                    showDom += "<td>";
                                    showDom += eachBean.usertel;
                                    showDom += "</td>";

                                    showDom += "<td>";
                                    showDom += eachBean.userregdate;
                                    showDom += "</td>";

                                    showDom += "</tr>";
                                });

                                // 将要显示的html内容，赋值给tbody标签
                                $("#showData").html(showDom);
                            }
                        })
                    }

                }
            });
        }

        //////////////////////////////////新增操作//////////////////////////////////////
        function showSaveOrUpdateModal() {
            // 显示模态框
            $('#saveorupdateModal').modal('show');
            // 给modal中的 更新 按钮，绑定一个click点击事件，用于保存form表单的数据
            $("#btnUpdate").on("click", function () {
                // 清空form表单数据
                //$("#saveorupdateModal")[0].reset();
                // 更新按钮的点击事件的处理
                // 使用ajax将需要更新的数据发送到服务器，进行新增操作
                $.ajax({
                    type: "post", // 指明request请求类型为post请求
                    url: "saveUserInfo", // 请求的url，form表单的action属性的值
                    data: $("#form4update").serialize(),// serialize方法将form表单进行序列化处理；客户端浏览器发送给服务器端的数据
                    dataType: "json", // 指明服务器发回的响应内容的格式 Json【服务器发给ajax引擎的是json字符串，jquery将json字符串转换为json对象】
                    success: function (data) { // ajax引擎执行成功之后的回调函数处理【符合条件：xmlhttp.readyState == 4 && xmlhttp.status == 200】
                        // console.log("ajax查询结果：");
                        // console.log(data);
                        if (data && data == "ok") {
                            alert("数据已更新成功！");
                        } else {
                            alert("数据更新失败！")
                        }
                        // 关闭模态框
                        $('#saveorupdateModal').modal('hide');
                    }
                });


            })
        }

    </script>
</head>
<body style="width: 100%">
<div style="width: 90%;margin: 10px auto;padding-top: 20px">
    <form class="form-horizontal" id="formQuery">
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userName" name="username" placeholder="请输入姓名">
            </div>

            <label class="col-sm-2 control-label">地址</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userAddress" name="useraddress" placeholder="请输入地址">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">联系电话</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userTel" name="usertel" placeholder="请输入联系电话">
            </div>

            <label class="col-sm-2 control-label">注册日期</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userRegDate" name="userregdate" placeholder="请输入注册日期"
                       onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">-
                <input type="text" class="form-control" id="userRegDate2" name="userregdate2" placeholder="请输入注册日期">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <%--                此处不需要提交form表单到服务器，所有不要使用submit类型的按钮--%>
                <button type="button" class="btn btn-default" onclick="doAjaxQuery()">查询</button>
                <button type="button" class="btn btn-default" onclick="showSaveOrUpdateModal()">新增</button>
            </div>
        </div>
    </form>
</div>

<div style="width: 90%;margin: 10px auto">
    <div>
        <table class="table table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>地址</th>
                <th>联系电话</th>
                <th>注册日期</th>
            </tr>
            </thead>

            <%--            ajax查询结果集显示的控件--%>
            <tbody id="showData">

            </tbody>
        </table>
        <%--        分页栏显示的位置--%>
        <div id="mypager"></div>
    </div>
</div>


<%--将bootstrap的模态框放入，body部分的最后，最好不要和其他的div穿插在一起--%>
<div class="modal fade" tabindex="-1" role="dialog" id="saveorupdateModal" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">用户信息管理</h4>
            </div>
            <div class="modal-body">
                <%--modal模态框的主体部分，这里绘制新增或者修改页面--%>
                <div style="padding-top: 20px">
                    <form class="form-horizontal" id="form4update">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="username4update" name="username"
                                       placeholder="请输入姓名">
                            </div>

                            <label class="col-sm-2 control-label">地址</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="useraddress4update" name="useraddress"
                                       placeholder="请输入地址">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-4">
                                <input type="password" class="form-control" id="userpsw4update" name="userpsw"
                                       placeholder="请输入密码">
                            </div>

                            <label class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-4">
                                <input type="password" class="form-control" id="userpsw24update" placeholder="Password">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">联系电话</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="usertel4update" name="usertel"
                                       placeholder="请输入联系电话">
                            </div>

                            <label class="col-sm-2 control-label">注册日期</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="userregdate4update" name="userregdate"
                                       placeholder="请输入注册日期">
                            </div>
                        </div>
                    </form>
                </div>

                <%--模态框主题页面绘制完成--%>

            </div>
            <div class="modal-footer">
                <button type="button" id="btnUpdate" class="btn btn-default">更新</button>
                <button type="button" id="btnClose" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</body>
</html>

